What is the semantically correct way to use the `<article>` tag in HTML 5, with `<ol>, <ul>, and <li

Posted by viatropos on Stack Overflow See other posts from Stack Overflow or by viatropos
Published on 2010-05-24T06:41:15Z Indexed on 2010/05/24 6:51 UTC
Read the original article Hit count: 490

Filed under:
|
|

I currently have an ordered list that I want to markup using the new HTML 5 attributes. It looks like this:

<ol class="section">
  <li class="article">
    <h2>Article A</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article B</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article C</h2>
    <p>Some text</p>
  </li>
</ol>

It seems the only way to keep the list AND use HTML 5 tags is to add a whole bunch of unnecessary divs:

<section>
  <ol>
    <li>
      <article>
        <h2>Article A</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article B</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article C</h2>
        <p>Some text</p>
      </article>
    </li>
  </ol>
</section>

Is there a better way to do this? What are your thoughts?

© Stack Overflow or respective owner

Related posts about html5

Related posts about semantic